<template>
  <div class="customer">
    <van-nav-bar
        title="日程列表"
        left-arrow
        left-text="返回"
        @click-left="back"
    />
    <div style="width: 100%;height: 100%;background: #ffffff;margin-top: 10px">
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">日程</van-divider>
      <van-list style="overflow: scroll">
        <div class="listColumn">
          <div>日程计划单号</div>
          <div>申请人</div>
          <div>申请日期</div>
          <div>计划开始日期</div>
          <div>计划结束日期</div>
          <div>实际完成时间</div>
          <div>客户名称</div>
          <div>商机名称</div>
          <div>计划内容</div>
          <div>地点</div>
          <div>审核状态</div>
          <div>日程状态</div>
        </div>
        <div class="listItem" v-for="(task, index) in taskList" :key="index">
          <div>{{ task.fbillno }}</div>
          <div>{{ task.createBy }}</div>
          <div>{{ task.createTime }}</div>
          <div>{{ task.fstarttime }}</div>
          <div>{{ task.fendtime }}</div>
          <div>{{ task.fdate }}</div>
          <div>{{ task.fcustomer }}</div>
          <div>{{ task.sjname }}</div>
          <div>{{ task.fnote }}</div>
          <div>{{ task.faddress }}</div>
          <div>{{ task.fcheckedName }}</div>
          <div>{{ task.fstatusName }}</div>
        </div>
      </van-list>
    </div>

    <div style="width: 100%;height: 100%;background: #ffffff;margin-top: 10px">
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">待办事项</van-divider>
      <van-list style="overflow: scroll">
        <div class="listColumn1">
          <div>单号</div>
          <div>待办人</div>
          <div>客户名称</div>
          <div>商机名称</div>
          <div>计划完成日期</div>
          <div>事项名称</div>
          <div>完成内容</div>
          <div>完成人</div>
          <div>完成时间</div>
          <div>完成状态</div>
        </div>
        <div class="listItem1" v-for="(task, index) in taskList1" :key="index">
          <div>{{ task.fbillno }}</div>
          <div>{{ task.createBy }}</div>
          <div>{{ task.fcustomer }}</div>
          <div>{{ task.sjname }}</div>
          <div>{{ task.fendtime }}</div>
          <div>{{ task.fname }}</div>
          <div>{{ task.fnote }}</div>
          <div>{{ task.finisher }}</div>
          <div>{{ task.finishtime }}</div>
          <div>{{ task.fstatusName }}</div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
import { mapState } from 'vuex'
import { serScheduleDetail, serTaskDetail } from '@/api/api'
import { Notify, Dialog, Toast } from 'vant'
import moment from "moment";
var sha1 = require('js-sha1')
export default {
  name: "calendarDetail",
  components: {
  },
  data () {
    return {
      taskList: [],
      taskList1: []
    }
  },
  computed: {
    ...mapState({
      openId: state => state.user.openId,
      access_token: state => state.app.access_token,
      ticket: state => state.app.ticket,
      appId: state => state.user.appId
    })
  },
  mounted() {
    this.ConfigFn(this.ticket)
  },
  created () {
    let fday = this.$route.params.fday
    let ftype = this.$route.params.ftype
    this.getList(fday, ftype)
  },
  methods: {
    getList (fday, ftype) {
      serScheduleDetail({ fday, ftype}).then(res => {
        if (res.success) {
          this.taskList = res.result
        }else {
          Notify({ type: 'danger', message: res.message, duration: 4000 })
        }

      })
      serTaskDetail({ fday, ftype }).then(res => {
        if (res.success) {
          this.taskList1 = res.result
        }else {
          Notify({ type: 'danger', message: res.message, duration: 4000 })
        }

      })
    },
    //注入配置
    ConfigFn(JsapiTicket){
      var mytimestamp = (Date.parse(new Date())) / 1000
      var mynonceStr = sha1(String(mytimestamp)).substring(0, 16)
      var mysignature = 'jsapi_ticket=' + JsapiTicket + '&noncestr=' + mynonceStr + '&timestamp=' + mytimestamp + '&url=' + window.parent.location.href.split('#')[0]
      wx.config({
        beta: true,
        debug: false,
        appId: this.appId,
        timestamp: mytimestamp,
        nonceStr: mynonceStr,
        signature: sha1(mysignature),
        jsApiList: [
          'getLocation',
          'checkJsApi'
        ]
      })
      wx.error(function(res){
      })
      wx.ready(function(res){
      })
    },
    checkJsApi(api){//检测api是否可用
      return new Promise((rel,err)=>{
        wx.checkJsApi({
          jsApiList: [api],
          success: function(res) {
            if(res.checkResult&&res.checkResult.getLocation == false){
              Toast('微信版本较低，请升级后重试！')
              err('版本低')
            }else{
              rel(true)
            }
          }
        });
      })
    },
    back () {
      this.$router.push({name: 'calendarList'})
    },
  }
}
</script>

<style scoped>
.customer{
  min-height: 100vh;
  background: #ffffff;
}
.listColumn{
  width: 2450px;
  display: flex;
  line-height: 45px;
  background: #eee;
}
.listColumn div:nth-of-type(1) {
  width: 150px;
}
.listColumn div:nth-of-type(2) {
  width: 150px;
}
.listColumn div:nth-of-type(3) {
  width: 150px;
}
.listColumn div:nth-of-type(4) {
  width: 200px;
}
.listColumn div:nth-of-type(5) {
  width: 200px;
}
.listColumn div:nth-of-type(6) {
  width: 200px;
}
.listColumn div:nth-of-type(7) {
  width: 300px;
}
.listColumn div:nth-of-type(8) {
  width: 300px;
}
.listColumn div:nth-of-type(9) {
  width: 300px;
}
.listColumn div:nth-of-type(10) {
  width: 300px;
}
.listColumn div:nth-of-type(11) {
  width: 100px;
}
.listColumn div:nth-of-type(12) {
  width: 100px;
}
.listItem{
  width: 2450px;
  display: flex;
  line-height: 38px;
  border-bottom: 1px solid #eeeeee;
}
.listItem div:nth-of-type(1) {
  width: 150px;
}
.listItem div:nth-of-type(2) {
  width: 150px;
}
.listItem div:nth-of-type(3) {
  width: 150px;
}
.listItem div:nth-of-type(4) {
  width: 200px;
}
.listItem div:nth-of-type(5) {
  width: 200px;
}
.listItem div:nth-of-type(6) {
  width: 200px;
}
.listItem div:nth-of-type(7) {
  width: 300px;
}
.listItem div:nth-of-type(8) {
  width: 300px;
}
.listItem div:nth-of-type(9) {
  width: 300px;
}
.listItem div:nth-of-type(10) {
  width: 300px;
}
.listItem div:nth-of-type(11) {
  width: 100px;
}
.listItem div:nth-of-type(12) {
  width: 100px;
}
.listColumn1{
  width: 2100px;
  display: flex;
  line-height: 45px;
  background: #eee;
}
.listColumn1 div:nth-of-type(1) {
  width: 150px;
}
.listColumn1 div:nth-of-type(2) {
  width: 300px;
}
.listColumn1 div:nth-of-type(3) {
  width: 300px;
}
.listColumn1 div:nth-of-type(4) {
  width: 150px;
}
.listColumn1 div:nth-of-type(5) {
  width: 150px;
}
.listColumn1 div:nth-of-type(6) {
  width: 300px;
}
.listColumn1 div:nth-of-type(7) {
  width: 300px;
}
.listColumn1 div:nth-of-type(8) {
  width: 150px;
}
.listColumn1 div:nth-of-type(9) {
  width: 150px;
}
.listColumn1 div:nth-of-type(10) {
  width: 150px;
}
.listItem1{
  width: 2100px;
  display: flex;
  line-height: 38px;
  border-bottom: 1px solid #eeeeee;
}
.listItem1 div:nth-of-type(1) {
  width: 150px;
}
.listItem1 div:nth-of-type(2) {
  width: 300px;
}
.listItem1 div:nth-of-type(3) {
  width: 300px;
}
.listItem1 div:nth-of-type(4) {
  width: 150px;
}
.listItem1 div:nth-of-type(5) {
  width: 150px;
}
.listItem1 div:nth-of-type(6) {
  width: 300px;
}
.listItem1 div:nth-of-type(7) {
  width: 300px;
}
.listItem1 div:nth-of-type(8) {
  width: 150px;
}
.listItem1 div:nth-of-type(9) {
  width: 150px;
}
.listItem1 div:nth-of-type(10) {
  width: 150px;
}
</style>